// 引入api  
import { getGoodsDetail, cartAdd } from '@/api/api'
import { useRouter, useRoute } from 'vue-router'
import { toRefs, reactive, onMounted, ref, nextTick } from 'vue'


export function useDetail() {
    const router = useRouter()
    const route = useRoute()


    // 详情页面导航栏逻辑
    function useDetailNav() {
        // 通过 actions 属性来定义菜单选项
        const actions = [
            { text: '首页', icon: 'wap-home-o', path: '/' },
            { text: '购物车', icon: 'shopping-cart-o', path: '/cart' },
            { text: '分享', icon: 'share-o', path: 'share' },
        ];



        const onClickLeft = () => {
            router.back()
        }


        const selectHandler = (action: any) => {
            //  点击的时候 需要判断  选中是哪个  如果是   首页  购物车  跳转 
            // 如果是  那么久直接 分享
            if (action.text != '分享') {
                // 跳转 到 基于 当前的path  路径的路由
                router.push(action.path)
            } else {
                // 1 弹出分享提示框
                showShare.value = true

            }


        }
        return {
            actions,
            onClickLeft,
            selectHandler

        }
    }



    //  分享逻辑
    function useDetailShare() {
        // 分享弹框

        const showPopover = ref(false);

        // 定义分享的数据 
        const showShare = ref(false)
        //    分享弹框内容
        const options = [
            { name: '微信', icon: 'wechat' },
            { name: '微博', icon: 'weibo' },
            { name: '复制链接', icon: 'link' },
            { name: '分享海报', icon: 'poster' },
            { name: '二维码', icon: 'qrcode' },
        ];


        const onSelect = (option) => {
            showToast(option.name);
            showShare.value = false;
        };

        return {
            showPopover,
            showShare,
            options,
            onSelect
        }

    }

    //  商品详情展示  
    function useDetailShowList() {



        const detailObj = reactive({
            swipeArr: [],
            price: 100,
            proname: '冰箱沙发'


        })


        onMounted(async () => {
            console.log(route.params)
            // {id: 'pro_9951edb5-59d4-4562-8fe9-87b836a80b7f'}

            const { data } = await getGoodsDetail(route.params.id)
            detailObj.price = data.originprice

            detailObj.proname = data.proname
            detailObj.swipeArr = [data.img1, data.img2, data.img3, data.img4]
        })

        return {
            detailObj
        }

    }






    const { actions, onClickLeft, selectHandler } = useDetailNav()

    const { showPopover, showShare, options, onSelect } = useDetailShare()

    const { detailObj } = useDetailShowList()

    return {
        onClickLeft,
        showPopover,
        onSelect,
        options,
        actions,
        showShare,
        detailObj,
        selectHandler

    }
}



export function useDetailVideo() {
    //视频播放
    const issale = ref(false)
    const show = ref(false)
    const video = ref<HTMLVideoElement | null>(null)
    const playHandler = () => {
        show.value = true
        // 播放的逻辑 

        //ref  获取dom
        // 下一次加载的时候  加载的是最新的dom
        // console.log(video.value)
        nextTick(() => {
            // console.log(video.value)
            if (video.value) {
                video.value.play()
            }
        })
    }

    // 关闭视频弹出层，触发的函数
    const closeHandler = () => {
        //停止播放 
        //   把之前播放的时间 置为0  
        // 视频暂停播放
        video.value?.pause()
        if (video.value) {
            video.value.currentTime = 0
        }
    }

    return {
        issale,
        show,
        video,
        playHandler,
        closeHandler
    }

}

// 加入购物车逻辑
export function useDetailCart() {

    const route = useRoute()

    const userid = localStorage.getItem('userId')

    const issale = ref(true)
    const addHandler = async () => {
        let res = cartAdd({ num: 1, proid: route.params.id, userid: userid })

        console.log(res)
    }

    return {
        issale,
        addHandler
    }



}


